<!--ページの設定-->

	<div data-role="page" data-theme="b">

	        <div data-role="panel" id="menupanel" data-theme="c">

	                <ul data-role="listview" data-theme="c">

	                </ul>

	        </div>

【イメージ】

３．＜li＞タグを入れます。今回は2つのXPagesを切り替えるので2個配置します。

【XPagesソース】

	        <div data-role="panel" id="menupanel" data-theme="c">

	                <ul data-role="listview" data-theme="c">

	                        <li>

	                        </li>

	                        <li>

	                        </li>

	                </ul>

	        </div>

【イメージ】

４．右のコアコントロールから、リンクコントロールを＜li＞タグの間に配置します。

【XPagesソース】

	                <ul data-role="listview" data-theme="c">

	                        <li>

	                                <xp:link escape="true" text="リンク" id="link2"></xp:link>

	                        </li>

	                        <li>

	                                <xp:link escape="true" text="リンク" id="link3"></xp:link>

	                        </li>

	                </ul>

５．二つ目のリンク(link3)を選択し、別のXPagesを表示するためのリンクを設定します。ラベルに「検索して探す」と入力し、リンクタイプに「ページを開く」、Xpagesに「search.xsp」を選択します。

【XPagesソース】

	                <li>

	                        <xp:link escape="true" id="link3" text="検索して探す"

	                                value="/search.xsp">

	                        </xp:link>

	                </li>

【イメージ】

６．一つ目のリンク(link2)を選択し、パネルと閉じるためのリンクを配置し、プロパティを追加します。ラベルに「分類から探す」と入力し、リンクタイプに「アンカー」、アンカーに「#」と入力します。

【XPagesソース】

	                <li>

	                        <xp:link escape="true" text="分類から探す" id="link2"

	                                value="##{id:#}">

	                        </xp:link>

	                </li>

【イメージ】

７．一つ目のリンク(link2)を選択し、すべてのプロパティ－基本－attrsの「＋」ボタンを押し、属性を追加します。nameに「data-rel」、valueに「close」と入力します。

【XPagesソース】

	                <li>

	                        <xp:link escape="true" text="分類から探す" id="link2"

	                                value="##{id:#}">

	                                <xp:this.attrs>

	                                        <xp:attr name="data-rel" value="close"></xp:attr>

	                                </xp:this.attrs>

	                        </xp:link>

	                </li>

【イメージ】

８．パネルを呼び出すリンクとアイコンをヘッダーに設定します。右のコアコントロールからリンクコントロールをヘッダーの下に配置します。

【XPagesソース】

	<!--ヘッダの設定-->

	<div data-role="header">

	        <xp:link escape="true" text="リンク" id="link4"></xp:link>

	        <h1>分類</h1>

	</div>

９．リンクコントロールを選択し、Panelコントロールを表示するためのリンクを設定します。ラベルを削除し、リンクタイプに「アンカー」、アンカーに「menupanel」を選択します。

【XPagesソース】

	<div data-role="header">

	        <xp:link escape="true" id="link4"

	                value="##{id:menupanel}">

	        </xp:link>

	        <h1>分類</h1>

	</div>

【イメージ】

１０．リンクコントロールを選択し、すべてのプロパティ－基本－attrsの「＋」ボタンを押し、属性を2つ追加します。それぞれ、下記の値を設定します。

【XPagesソース】

【イメージ】

１２．切り替わり先となるXPages(search.xsp)にも同様のパネルを配置し、リンク先を設定します。